<template>
    <view>
        <uni-list v-if="user">
            <uni-list-item title="品牌LOGO" link>
                <template v-slot:footer>
                    <image  class="slot-image logo" :src="user.headimg" mode="aspectFill" @click="headimg()"></image>
                </template>
            </uni-list-item>
            <uni-list-item title="账号">
                <template v-slot:footer>
                    <text class="right-text">{{user.account}}</text>
                </template>
            </uni-list-item>
            <uni-list-item title="品牌名称" link @click="inputDialogToggle('username')">
                <template v-slot:footer>
                    <text class="right-text">{{user.username}}</text>
                    
                </template>
            </uni-list-item>

            <uni-list-item title="地址" link @click="inputDialogToggle('address')">
                <template v-slot:footer>
                    <text class="right-text">{{user.address}}</text>
                </template>
            </uni-list-item>
            
            <uni-list-item title="联系电话" link @click="inputDialogToggle('phone')">
                <template v-slot:footer>
                    <text class="right-text">{{user.phone}}</text>
                </template>
            </uni-list-item>
       <!--     <uni-list-item title="面积" link @click="inputDialogToggle('area')">
                <template v-slot:footer>
                    <text class="right-text">{{user.area}}㎡</text>
                </template>
            </uni-list-item>
            <uni-list-item title="总包联系人" link @click="inputDialogToggle('work_man')">
                <template v-slot:footer>
                    <text class="right-text">{{user.work_man}}</text>
                </template>
            </uni-list-item> -->
            <uni-list-item title="登录密码" link @click="inputDialogToggle('password')">
                <template v-slot:footer>
                    <text class="right-text">点击修改</text>
                </template>
            </uni-list-item>
        </uni-list>
        
        <button type="warn" class="login_out" @click="loginout()">退出登录</button>
        <!-- 输入框示例 -->
        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose"
             v-model="value"
            mode="input" title="" :value="value"
                placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
        </uni-popup>
        <tabbar current="basic"></tabbar>
    </view>
</template>

<script>
    import tabbar from "@/components/tabbar.vue"
    export default {
      name:"basic",  
      data() {
        return {
          constants: {},
          user:null,
          title:'',
          type:'',
          value:'',
        };
      },
      components:{
        tabbar  
      },
      onShow(){
          this.main()
      },
      methods: {
          loginout(){
              this.$api.post(`user/loginout`).then((res)=>{
                  uni.removeStorageSync('nangtong_login_token')
                  this.$navto('/pages/login/index')
              })
              // uni.getStorageSync('nangtong_login_token');
          },
          inputDialogToggle(type){
              this.value = this.user[type]
              this.type = type
              this.$refs.inputDialog.open()
          },
          dialogInputConfirm(val){
              if(this.type == 'password'){
                this.$api.post(`user/editpass`,{pass:val}).then((res)=>{
                    this.$success("修改成功")
                    this.$refs.inputDialog.close()
                })  
              }else{
                this.$api.post(`user/editbase`,{type:this.type,value:val}).then(()=>{
                    this.$success("修改成功")
                    this.user[this.type] = val
                    this.$refs.inputDialog.close()
                })  
              }
              
          },
          main(){
              this.$api.get(`user/main`).then(({data})=>{
                  this.user = data
              })
          },
          headimg(){
              var _this = this
              uni.chooseImage({
                  count:1,
                  success:function(res){
                
                   
                    
                      uni.showLoading({
                          title:'上传中...',
                          mask:true
                      })
                      var uploadTask = uni.uploadFile({
                          url:_this.$api.postURL+'user/headimg',
                          filePath:res.tempFilePaths[0],
                          fileType:"image",
                          name:"file",
                          header:{
                              Authorization:uni.getStorageSync('nangtong_login_token')
                          },
                          formData:{},
                          success: (uploadFileRes) => {
                              var data = JSON.parse(uploadFileRes.data);
                              
                              if(data.code == 0){
                                  _this.$error(data.message)
                              }else{
                                 _this.$success("上传成功") 
                                 _this.user.headimg = data.data.url
                              }
                          },
                          complete:function(){
                           
                              uni.hideLoading()
                          }
                      })
                    
                  },
                  
              })
          }
      },
    };    
</script>

<style lang="less">
    .logo{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }
    .right-text{
        font-size: 24rpx;
        color: #8f939c;
    }
    .login_out{
        width: 90%;
        margin: 0 auto;
        margin-top: 50rpx;
    }
</style>